<template>
  <div class="statistics-box">
    <div class="statistics-box-top">
      <h3>页面流量</h3>
      <div class="stat-top-lr">
        <div class="btn">
          <el-radio-group
            v-model="radio"
            @change="dasSel"
          >
            <el-radio-button label="最近7天" />
            <el-radio-button label="最近30天" />
            <el-radio-button label="最近90天" />
          </el-radio-group>
        </div>
        <div class="block">
          <el-date-picker
            v-model="value"
            style="max-width:238px"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="selTime"
          />
        </div>
        <div class="drop">
          <span>统计页面:</span>
          <el-select
            v-model="dropValue"
            style="max-width:165px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- <div
          class="exportBtn"
          @click="exportBtn"
        >导出数据</div> -->
      </div>
    </div>
    <div class="statistics-box-bot">
      <div
        ref="_chart"
        class="echar"
      >
        <div class="echar-catch">
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTrafficData } from '@/api/statistics.js'
import { formatDate } from '@/utils/util.js'
export default {
  data() {
    return {
      value: '',
      radio: '最近7天',
      dropValue: '',
      options: [
        {
          value: '1',
          label: '全站'
        }
      ],
      option: {
        legend: {
          data: ['浏览次数（PV）', '独立访客(UV)'],
          itemGap: 100,
          bottom: 0
        },
        xAxis: {
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#FFFFFF',
          borderColor: '#CBCBCB',
          padding: 10,
          textStyle: {
            color: '#999999',
            height: 20
          }
        },
        series: [
          {
            name: '浏览次数（PV）',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              color: '#95FC1B'
            },
            symbol: 'none'
          },
          {
            name: '独立访客(UV)',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            itemStyle: {
              color: '#FCB61B'
            },
            symbol: 'none'
          }
        ]
      },
      myChart: null

    }
  },
  created() {
    this.getData('', '', '7')
  },
  mounted() {

  },
  methods: {
    // 获取数据
    getData(startTime, endTime, recentlyTime) {
      console.log(1111)
      getTrafficData({
        startTime: startTime,
        endTime: endTime,
        recentlyTime: recentlyTime
      }).then(res => {
        // console.log(res)
        this.option.xAxis.data = []
        this.option.series[0].data = []
        this.option.series[1].data = []
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].create_time = formatDate(res.data[i].create_time)
          this.option.xAxis.data.push(res.data[i].create_time)
          this.option.series[0].data.push(res.data[i].pvCount)
          this.option.series[1].data.push(res.data[i].uvCount)
        }
        // return a
        this.init()
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      })
    },
    // 筛选
    dasSel() {
      if (this.radio === '最近30天') {
        this.getData('', '', '30')
      } else if (this.radio === '最近90天') {
        this.getData('', '', '90')
      } else {
        this.getData('', '', '7')
      }
    },
    // 导出数据
    exportBtn() {

    },
    // 选择时间
    selTime() {
      console.log(this.value)
      if (this.value) {
        this.getData(this.value[0], this.value[1])
      } else {
        this.getData('', '', '7')
      }
    },
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs._chart)
      this.myChart.setOption({ ...this.option })
    }
  }
}
</script>

